<!-- HEADER -->
<header id="header">
    <div id="logo-group">

        <!-- PLACE YOUR LOGO HERE -->
        <span id="logo"> <img src="/static/img/logo.png" alt="SmartAdmin"> </span>
        <!-- END LOGO PLACEHOLDER -->

        <!-- Note: The activity badge color changes when clicked and resets the number to 0
        Suggestion: You may want to set a flag when this happens to tick off all checked messages / notifications -->
        <span id="activity" class="activity-dropdown"> <i class="fa fa-user"></i> <b class="badge"> 21 </b> </span>

        <!-- AJAX-DROPDOWN : control this dropdown height, look and feel from the LESS variable file -->
        <div class="ajax-dropdown">

            <!-- the ID links are fetched via AJAX to the ajax container "ajax-notifications" -->
            <div class="btn-group btn-group-justified" data-toggle="buttons">
                <label class="btn btn-default">
                    <input type="radio" name="activity" id="/static/ajax/notify/mail">
                    Msgs (14) </label>
                <label class="btn btn-default">
                    <input type="radio" name="activity" id="/static/ajax/notify/notifications">
                    notify (3) </label>
                <label class="btn btn-default">
                    <input type="radio" name="activity" id="/static/ajax/notify/tasks">
                    Tasks (4) </label>
            </div>

            <!-- notification content -->
            <div class="ajax-notifications custom-scroll">

                <div class="alert alert-transparent">
                    <h4>Click a button to show messages here</h4>
                    This blank page message helps protect your privacy, or you can show the first message here automatically.
                </div>

                <i class="fa fa-lock fa-4x fa-border"></i>

            </div>
            <!-- end notification content -->

            <!-- footer: refresh area -->
            <span> Last updated on: 12/12/2013 9:43AM
						<button type="button" data-loading-text="<i class='fa fa-refresh fa-spin'></i> Loading..." class="btn btn-xs btn-default pull-right">
							<i class="fa fa-refresh"></i>
						</button>
					</span>
            <!-- end footer -->

        </div>
        <!-- END AJAX-DROPDOWN -->
    </div>

    <!-- projects dropdown -->
    <div class="project-context hidden-xs">

        <span class="label">Projects:</span>
        <span class="project-selector dropdown-toggle" data-toggle="dropdown">Recent projects <i class="fa fa-angle-down"></i></span>

        <!-- Suggestion: populate this list with fetch and push technique -->
        <ul class="dropdown-menu">
            <li>
                <a href="javascript:void(0);">Online e-merchant management system - attaching integration with the iOS</a>
            </li>
            <li>
                <a href="javascript:void(0);">Notes on pipeline upgradee</a>
            </li>
            <li>
                <a href="javascript:void(0);">Assesment Report for merchant account</a>
            </li>
            <li class="divider"></li>
            <li>
                <a href="javascript:void(0);"><i class="fa fa-power-off"></i> Clear</a>
            </li>
        </ul>
        <!-- end dropdown-menu-->

    </div>
    <!-- end projects dropdown -->

    <!-- pulled right: nav area -->
    <div class="pull-right">

        <!-- collapse menu button -->
        <div id="hide-menu" class="btn-header pull-right">
            <span> <a href="javascript:void(0);" data-action="toggleMenu" title="Collapse Menu"><i class="fa fa-reorder"></i></a> </span>
        </div>
        <!-- end collapse menu -->

        <!-- #MOBILE -->
        <!-- Top menu profile link : this shows only when top menu is active -->
        <ul id="mobile-profile-img" class="header-dropdown-list hidden-xs padding-5">
            <li class="">
                <a href="#" class="dropdown-toggle no-margin userdropdown" data-toggle="dropdown">
                    <img src="/static/img/avatars/sunny.png" alt="John Doe" class="online" />
                </a>
                <ul class="dropdown-menu pull-right">
                    <li>
                        <a href="javascript:void(0);" class="padding-10 padding-top-0 padding-bottom-0"><i class="fa fa-cog"></i> Setting</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="/profile" class="padding-10 padding-top-0 padding-bottom-0"> <i class="fa fa-user"></i> <u>P</u>rofile</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="javascript:void(0);" class="padding-10 padding-top-0 padding-bottom-0" data-action="toggleShortcut"><i class="fa fa-arrow-down"></i> <u>S</u>hortcut</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="javascript:void(0);" class="padding-10 padding-top-0 padding-bottom-0" data-action="launchFullscreen"><i class="fa fa-arrows-alt"></i> Full <u>S</u>creen</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="/login" class="padding-10 padding-top-5 padding-bottom-5" data-action="userLogout"><i class="fa fa-sign-out fa-lg"></i> <strong><u>L</u>ogout</strong></a>
                    </li>
                </ul>
            </li>
        </ul>

        <!-- logout button -->
        <div id="logout" class="btn-header transparent pull-right">
            <span> <a href="/login" title="Sign Out" data-action="userLogout" data-logout-msg="You can improve your security further after logging out by closing this opened browser"><i class="fa fa-sign-out"></i></a> </span>
        </div>
        <!-- end logout button -->

        <!-- search mobile button (this is hidden till mobile view port) -->
        <div id="search-mobile" class="btn-header transparent pull-right">
            <span> <a href="javascript:void(0)" title="Search"><i class="fa fa-search"></i></a> </span>
        </div>
        <!-- end search mobile button -->

        <!-- input: search field -->
        <form action="search" class="header-search pull-right">
            <input id="search-fld"  type="text" name="param" placeholder="Find reports and more" data-autocomplete='[
					"ActionScript",
					"AppleScript",
					"Asp",
					"BASIC",
					"C",
					"C++",
					"Clojure",
					"COBOL",
					"ColdFusion",
					"Erlang",
					"Fortran",
					"Groovy",
					"Haskell",
					"Java",
					"JavaScript",
					"Lisp",
					"Perl",
					"PHP",
					"Python",
					"Ruby",
					"Scala",
					"Scheme"]'>
            <button type="submit">
                <i class="fa fa-search"></i>
            </button>
            <a href="javascript:void(0);" id="cancel-search-js" title="Cancel Search"><i class="fa fa-times"></i></a>
        </form>
        <!-- end input: search field -->

        <!-- fullscreen button -->
        <div id="fullscreen" class="btn-header transparent pull-right">
            <span> <a href="javascript:void(0);" data-action="launchFullscreen" title="Full Screen"><i class="fa fa-arrows-alt"></i></a> </span>
        </div>
        <!-- end fullscreen button -->

        <!-- #Voice Command: Start Speech -->
        <div id="speech-btn" class="btn-header transparent pull-right hidden-sm hidden-xs">
            <div>
                <a href="javascript:void(0)" title="Voice Command" data-action="voiceCommand"><i class="fa fa-microphone"></i></a>
                <div class="popover bottom"><div class="arrow"></div>
                    <div class="popover-content">
                        <h4 class="vc-title">Voice command activated <br><small>Please speak clearly into the mic</small></h4>
                        <h4 class="vc-title-error text-center">
                            <i class="fa fa-microphone-slash"></i> Voice command failed
                            <br><small class="txt-color-red">Must <strong>"Allow"</strong> Microphone</small>
                            <br><small class="txt-color-red">Must have <strong>Internet Connection</strong></small>
                        </h4>
                        <a href="javascript:void(0);" class="btn btn-success" onclick="commands.help()">See Commands</a>
                        <a href="javascript:void(0);" class="btn bg-color-purple txt-color-white" onclick="$('#speech-btn .popover').fadeOut(50);">Close Popup</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- end voice command -->

        <!-- multiple lang dropdown : find all flags in the flags page -->
        <ul class="header-dropdown-list hidden-xs">
            <li>
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <img src="/static/img/blank.gif" class="flag flag-us" alt="United States"> <span> English (US) </span> <i class="fa fa-angle-down"></i> </a>
                <ul class="dropdown-menu pull-right">
                    <li class="active">
                        <a href="javascript:void(0);"><img src="/static/img/blank.gif" class="flag flag-us" alt="United States"> English (US)</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);"><img src="/static/img/blank.gif" class="flag flag-fr" alt="France"> Français</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);"><img src="/static/img/blank.gif" class="flag flag-es" alt="Spanish"> Español</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);"><img src="/static/img/blank.gif" class="flag flag-de" alt="German"> Deutsch</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);"><img src="/static/img/blank.gif" class="flag flag-jp" alt="Japan"> 日本語</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);"><img src="/static/img/blank.gif" class="flag flag-cn" alt="China"> 中文</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);"><img src="/static/img/blank.gif" class="flag flag-it" alt="Italy"> Italiano</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);"><img src="/static/img/blank.gif" class="flag flag-pt" alt="Portugal"> Portugal</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);"><img src="/static/img/blank.gif" class="flag flag-ru" alt="Russia"> Русский язык</a>
                    </li>
                    <li>
                        <a href="javascript:void(0);"><img src="/static/img/blank.gif" class="flag flag-kr" alt="Korea"> 한국어</a>
                    </li>

                </ul>
            </li>
        </ul>
        <!-- end multiple lang -->

    </div>
    <!-- end pulled right: nav area -->

</header>
<!-- END HEADER -->

<!-- Left panel : Navigation area -->
<!-- Note: This width of the aside area can be adjusted through LESS variables -->
<aside id="left-panel">

    <!-- User info -->
    <div class="login-info">
				<span> <!-- User image size is adjusted inside CSS, it should stay as it -->

					<a href="javascript:void(0);" id="show-shortcut" data-action="toggleShortcut">
						<img src="/static/img/avatars/sunny.png" alt="me" class="online" />
						<span>
							liuwei 00465746
						</span>
						<i class="fa fa-angle-down"></i>
					</a>

				</span>
    </div>
    <!-- end user info -->

    <!-- NAVIGATION : This navigation is also responsive-->
    <nav>
        <!--
        NOTE: Notice the gaps after each icon usage <i></i>..
        Please note that these links work a bit different than
        traditional href="" links. See documentation for details.
        -->
        <ul>
            {% if commoninfo["menuinfo"] != null %}
                {% for tsysmenu in commoninfo["menuinfo"] %}
                    {% if tsysmenu.level == 1 %}
                        <li>
                            <a href="#" title={{tsysmenu.code}}><i class="{{tsysmenu.icon}}"></i> <span class="menu-item-parent">{{tsysmenu.name}}</span></a>
                            <ul>
                                {% for tsysmenu2 in commoninfo["menuinfo"] %}
                                    {% if tsysmenu2.level == 2  and tsysmenu.id == tsysmenu2.parent_id and tsysmenu2.id != tsysmenu.id%}
                                        {% if tsysmenu2.navigate_url == "" %}
                                            <li class="{{commoninfo["navactive"][tsysmenu2.code]}}">
                                                <a href="#"><i class="{{tsysmenu2.icon}}"></i><span class="menu-item-parent">{{tsysmenu2.name}}</span></a>
                                                <ul>
                                                    {% for tsysmenu3 in commoninfo["menuinfo"] %}
                                                        {% if tsysmenu3.level == 3 and tsysmenu2.id == tsysmenu3.parent_id and tsysmenu3.id != tsysmenu.id and tsysmenu3.id != tsysmenu2.id%}
                                                            <li class="{{commoninfo["navactive"][tsysmenu3.code]}}">
                                                                <a href="{{tsysmenu3.navigate_url}}" title={{tsysmenu3.code}}><i class="{{tsysmenu3.icon}}"></i>{{tsysmenu3.name}}</a>
                                                            </li>
                                                        {% endif %}
                                                    {% endfor %}
                                                </ul>
                                            </li>
                                        {% else %}
                                            <li class="{{commoninfo["navactive"][tsysmenu2.code]}}">
                                                <a href="{{tsysmenu2.navigate_url}}" title="{{tsysmenu2.code}}"><i class="{{tsysmenu2.icon}}"></i><span class="menu-item-parent">{{tsysmenu2.name}}</span></a>
                                            </li>
                                        {% endif %}
                                    {% endif %}
                                {% endfor %}
                            </ul>
                        </li>

                    {% endif %}
                {% endfor %}
            {% endif %}

        </ul>
{#        <ul>#}
{#            <li>#}
{#                <a href="#" title="Dashboard"><i class="fa fa-lg fa-fw fa-home"></i> <span class="menu-item-parent">{{commoninfo["menuinfo"][0].name}}</span></a>#}
{#                <ul>#}
{#                    <li class={{commoninfo["navactive"]["index"]}}>#}
{#                        <a href="/index" title="Dashboard"><span class="menu-item-parent">Analytics Dashboard</span></a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["dashboard_social"]}}>#}
{#                        <a href="/dashboard-social" title="Dashboard"><span class="menu-item-parent">Social Wall</span></a>#}
{#                    </li>#}
{#                </ul>#}
{#            </li>#}
{#            <li class="top-menu-invisible">#}
{#                <a href="#"><i class="fa fa-lg fa-fw fa-cube txt-color-blue"></i> <span class="menu-item-parent">SmartAdmin Intel</span></a>#}
{#                <ul>#}
{#                    <li class={{commoninfo["navactive"]["layouts"]}}>#}
{#                        <a href="/layouts" title="Dashboard"><i class="fa fa-lg fa-fw fa-gear"></i> <span class="menu-item-parent">App Layouts</span></a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["skins"]}}>#}
{#                        <a href="/skins" title="Dashboard"><i class="fa fa-lg fa-fw fa-picture-o"></i> <span class="menu-item-parent">Prebuilt Skins</span></a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["applayout"]}}>#}
{#                        <a href="/applayout"><i class="fa fa-cube"></i> App Settings</a>#}
{#                    </li>#}
{#                </ul>#}
{#            </li>#}
{#            <li class={{commoninfo["navactive"]["inbox"]}}>#}
{#                <a href="/inbox"><i class="fa fa-lg fa-fw fa-inbox"></i> <span class="menu-item-parent">Outlook</span> <span class="badge pull-right inbox-badge margin-right-13">14</span></a>#}
{#            </li>#}
{#            <li>#}
{#                <a href="#"><i class="fa fa-lg fa-fw fa-bar-chart-o"></i> <span class="menu-item-parent">Graphs</span></a>#}
{#                <ul>#}
{#                    <li class={{commoninfo["navactive"]["flot"]}}>#}
{#                        <a href="/flot">Flot Chart</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["morris"]}}>#}
{#                        <a href="/morris">Morris Charts</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["sparkline_charts"]}}>#}
{#                        <a href="/sparkline-charts">Sparklines</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["easypie_charts"]}}>#}
{#                        <a href="/easypie-charts">EasyPieCharts</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["dygraphs"]}}>#}
{#                        <a href="/dygraphs">Dygraphs</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["chartjs"]}}>#}
{#                        <a href="/chartjs">Chart.js</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["hchartable"]}}>#}
{#                        <a href="/hchartable">HighchartTable <span class="badge pull-right inbox-badge bg-color-yellow">new</span></a>#}
{#                    </li>#}
{#                </ul>#}
{#            </li>#}
{#            <li>#}
{#                <a href="#"><i class="fa fa-lg fa-fw fa-table"></i> <span class="menu-item-parent">Tables</span></a>#}
{#                <ul>#}
{#                    <li class={{commoninfo["navactive"]["table"]}}>#}
{#                        <a href="/table">Normal Tables</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["datatables"]}}>#}
{#                        <a href="/datatables">Data Tables <span class="badge inbox-badge bg-color-greenLight hidden-mobile">responsive</span></a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["jqgrid"]}}>#}
{#                        <a href="/jqgrid">Jquery Grid</a>#}
{#                    </li>#}
{#                </ul>#}
{#            </li>#}
{#            <li>#}
{#                <a href="#"><i class="fa fa-lg fa-fw fa-pencil-square-o"></i> <span class="menu-item-parent">Forms</span></a>#}
{#                <ul>#}
{#                    <li class={{commoninfo["navactive"]["form_elements"]}}>#}
{#                        <a href="/form-elements">Smart Form Elements</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["form_templates"]}}>#}
{#                        <a href="/form-templates">Smart Form Layouts</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["validation"]}}>#}
{#                        <a href="/validation">Smart Form Validation</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["bootstrap_forms"]}}>#}
{#                        <a href="/bootstrap-forms">Bootstrap Form Elements</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["bootstrap_validator"]}}>#}
{#                        <a href="/bootstrap-validator">Bootstrap Form Validation</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["plugins"]}}>#}
{#                        <a href="/plugins">Form Plugins</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["wizard"]}}>#}
{#                        <a href="/wizard">Wizards</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["other_editors"]}}>#}
{#                        <a href="/other-editors">Bootstrap Editors</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["dropzone"]}}>#}
{#                        <a href="/dropzone">Dropzone</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["image_editor"]}}>#}
{#                        <a href="/image-editor">Image Cropping</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["ckeditor"]}}>#}
{#                        <a href="/ckeditor">CK Editor</a>#}
{#                    </li>#}
{#                </ul>#}
{#            </li>#}
{#            <li>#}
{#                <a href="#"><i class="fa fa-lg fa-fw fa-desktop"></i> <span class="menu-item-parent">UI Elements</span></a>#}
{#                <ul>#}
{#                    <li class={{commoninfo["navactive"]["general_elements"]}}>#}
{#                        <a href="/general-elements">General Elements</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["buttons"]}}>#}
{#                        <a href="/buttons">Buttons</a>#}
{#                    </li>#}
{#                    <li>#}
{#                        <a href="#">Icons</a>#}
{#                        <ul>#}
{#                            <li class={{commoninfo["navactive"]["fa"]}}>#}
{#                                <a href="/fa"><i class="fa fa-plane"></i> Font Awesome</a>#}
{#                            </li>#}
{#                            <li class={{commoninfo["navactive"]["glyph"]}}>#}
{#                                <a href="/glyph"><i class="glyphicon glyphicon-plane"></i> Glyph Icons</a>#}
{#                            </li>#}
{#                            <li class={{commoninfo["navactive"]["flags"]}}>#}
{#                                <a href="/flags"><i class="fa fa-flag"></i> Flags</a>#}
{#                            </li>#}
{#                        </ul>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["grid"]}}>#}
{#                        <a href="/grid">Grid</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["treeview"]}}>#}
{#                        <a href="/treeview">Tree View</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["nestable_list"]}}>#}
{#                        <a href="/nestable-list">Nestable Lists</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["jqui"]}}>#}
{#                        <a href="/jqui">JQuery UI</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["typography"]}}>#}
{#                        <a href="/typography">Typography</a>#}
{#                    </li>#}
{#                    <li>#}
{#                        <a href="#">Six Level Menu</a>#}
{#                        <ul>#}
{#                            <li>#}
{#                                <a href="#"><i class="fa fa-fw fa-folder-open"></i> Item #2</a>#}
{#                                <ul>#}
{#                                    <li>#}
{#                                        <a href="#"><i class="fa fa-fw fa-folder-open"></i> Sub #2.1 </a>#}
{#                                        <ul>#}
{#                                            <li>#}
{#                                                <a href="#"><i class="fa fa-fw fa-file-text"></i> Item #2.1.1</a>#}
{#                                            </li>#}
{#                                            <li>#}
{#                                                <a href="#"><i class="fa fa-fw fa-plus"></i> Expand</a>#}
{#                                                <ul>#}
{#                                                    <li>#}
{#                                                        <a href="#"><i class="fa fa-fw fa-file-text"></i> File</a>#}
{#                                                    </li>#}
{#                                                </ul>#}
{#                                            </li>#}
{#                                        </ul>#}
{#                                    </li>#}
{#                                </ul>#}
{#                            </li>#}
{#                            <li>#}
{#                                <a href="#"><i class="fa fa-fw fa-folder-open"></i> Item #3</a>#}
{##}
{#                                <ul>#}
{#                                    <li>#}
{#                                        <a href="#"><i class="fa fa-fw fa-folder-open"></i> 3ed Level </a>#}
{#                                        <ul>#}
{#                                            <li>#}
{#                                                <a href="#"><i class="fa fa-fw fa-file-text"></i> File</a>#}
{#                                            </li>#}
{#                                            <li>#}
{#                                                <a href="#"><i class="fa fa-fw fa-file-text"></i> File</a>#}
{#                                            </li>#}
{#                                        </ul>#}
{#                                    </li>#}
{#                                </ul>#}
{#                            </li>#}
{#                            <li>#}
{#                                <a href="#" class="inactive"><i class="fa fa-fw fa-folder-open"></i> Item #4 (disabled)</a>#}
{#                            </li>#}
{##}
{#                        </ul>#}
{#                    </li>#}
{#                </ul>#}
{#            </li>#}
{#            <li class={{commoninfo["navactive"]["widgets"]}}>#}
{#                <a href="/widgets"><i class="fa fa-lg fa-fw fa-list-alt"></i> <span class="menu-item-parent">Widgets</span></a>#}
{#            </li>#}
{#            <li>#}
{#                <a href="#"><i class="fa fa-lg fa-fw fa-cloud"><em>3</em></i> <span class="menu-item-parent">Cool Features!</span></a>#}
{#                <ul>#}
{#                    <li class={{commoninfo["navactive"]["calendar"]}}>#}
{#                        <a href="/calendar"><i class="fa fa-lg fa-fw fa-calendar"></i> <span class="menu-item-parent">Calendar</span></a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["gmap_xml"]}}>#}
{#                        <a href="/gmap-xml"><i class="fa fa-lg fa-fw fa-map-marker"></i> <span class="menu-item-parent">GMap Skins</span><span class="badge bg-color-greenLight pull-right inbox-badge">9</span></a>#}
{#                    </li>#}
{#                </ul>#}
{#            </li>#}
{#            <li>#}
{#                <a href="#"><i class="fa fa-lg fa-fw fa-puzzle-piece"></i> <span class="menu-item-parent">App Views</span></a>#}
{#                <ul>#}
{#                    <li class={{commoninfo["navactive"]["projects"]}}>#}
{#                        <a href="/projects"><i class="fa fa-file-text-o"></i> Projects</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["blog"]}}>#}
{#                        <a href="/blog"><i class="fa fa-paragraph"></i> Blog</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["gallery"]}}>#}
{#                        <a href="/gallery"><i class="fa fa-picture-o"></i> Gallery</a>#}
{#                    </li>#}
{#                    <li>#}
{#                        <a href="#"><i class="fa fa-comments"></i> Forum Layout</a>#}
{#                        <ul>#}
{#                            <li class={{commoninfo["navactive"]["forum"]}}><a href="/forum">General View</a></li>#}
{#                            <li class={{commoninfo["navactive"]["forum_topic"]}}><a href="/forum-topic">Topic View</a></li>#}
{#                            <li class={{commoninfo["navactive"]["forum_post"]}}><a href="/forum-post">Post View</a></li>#}
{#                        </ul>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["profile"]}}>#}
{#                        <a href="/profile"><i class="fa fa-group"></i> Profile</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["timeline"]}}>#}
{#                        <a href="/timeline"><i class="fa fa-clock-o"></i> Timeline</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["search"]}}>#}
{#                        <a href="/search"><i class="fa fa-search"></i>  Search Page</a>#}
{#                    </li>#}
{#                </ul>#}
{#            </li>#}
{#            <li>#}
{#                <a href="#"><i class="fa fa-lg fa-fw fa-shopping-cart"></i> <span class="menu-item-parent">E-Commerce</span></a>#}
{#                <ul>#}
{#                    <li class={{commoninfo["navactive"]["orders"]}} ><a href="/orders">Orders</a></li>#}
{#                    <li class={{commoninfo["navactive"]["products_view"]}}><a href="/products-view">Products View</a></li>#}
{#                    <li class={{commoninfo["navactive"]["products_detail"]}}><a href="/products-detail">Products Detail</a></li>#}
{#                </ul>#}
{#            </li>#}
{#            <li>#}
{#                <a href="#"><i class="fa fa-lg fa-fw fa-windows"></i> <span class="menu-item-parent">Miscellaneous</span></a>#}
{#                <ul>#}
{#                    <li>#}
{#                        <a href="/../Landing_Page/" target="_blank">Landing Page <i class="fa fa-external-link"></i></a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["pricing_table"]}}>#}
{#                        <a href="/pricing-table">Pricing Tables</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["invoice"]}}>#}
{#                        <a href="/invoice">Invoice</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["login"]}}>#}
{#                        <a href="/login" target="_top">Login</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["register"]}}>#}
{#                        <a href="/register" target="_top">Register</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["forgotpassword"]}}>#}
{#                        <a href="/forgotpassword" target="_top">Forgot Password</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["lock"]}}>#}
{#                        <a href="/lock" target="_top">Locked Screen</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["error404"]}}>#}
{#                        <a href="/error404">Error 404</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["error500"]}}>#}
{#                        <a href="/error500">Error 500</a>#}
{#                    </li>#}
{#                    <li class={{commoninfo["navactive"]["blank_"]}}>#}
{#                        <a href="/blank_">Blank Page</a>#}
{#                    </li>#}
{#                </ul>#}
{#            </li>#}
{#            <li class="chat-users top-menu-invisible">#}
{#                <a href="#"><i class="fa fa-lg fa-fw fa-comment-o"><em class="bg-color-pink flash animated">!</em></i> <span class="menu-item-parent">Smart Chat API <sup>beta</sup></span></a>#}
{#                <ul>#}
{#                    <li>#}
{#                        <!-- DISPLAY USERS -->#}
{#                        <div class="display-users">#}
{##}
{#                            <input class="form-control chat-user-filter" placeholder="Filter" type="text">#}
{##}
{#                            <a href="#" class="usr"#}
{#                               data-chat-id="cha1"#}
{#                               data-chat-fname="Sadi"#}
{#                               data-chat-lname="Orlaf"#}
{#                               data-chat-status="busy"#}
{#                               data-chat-alertmsg="Sadi Orlaf is in a meeting. Please do not disturb!"#}
{#                               data-chat-alertshow="true"#}
{#                               data-rel="popover-hover"#}
{#                               data-placement="right"#}
{#                               data-html="true"#}
{#                               data-content="#}
{#											<div class='usr-card'>#}
{#												<img src='/static/img/avatars/5.png' alt='Sadi Orlaf'>#}
{#												<div class='usr-card-content'>#}
{#													<h3>Sadi Orlaf</h3>#}
{#													<p>Marketing Executive</p>#}
{#												</div>#}
{#											</div>#}
{#										">#}
{#                                <i></i>Sadi Orlaf#}
{#                            </a>#}
{##}
{#                            <a href="#" class="usr"#}
{#                               data-chat-id="cha2"#}
{#                               data-chat-fname="Jessica"#}
{#                               data-chat-lname="Dolof"#}
{#                               data-chat-status="online"#}
{#                               data-chat-alertmsg=""#}
{#                               data-chat-alertshow="false"#}
{#                               data-rel="popover-hover"#}
{#                               data-placement="right"#}
{#                               data-html="true"#}
{#                               data-content="#}
{#											<div class='usr-card'>#}
{#												<img src='/static/img/avatars/1.png' alt='Jessica Dolof'>#}
{#												<div class='usr-card-content'>#}
{#													<h3>Jessica Dolof</h3>#}
{#													<p>Sales Administrator</p>#}
{#												</div>#}
{#											</div>#}
{#										">#}
{#                                <i></i>Jessica Dolof#}
{#                            </a>#}
{##}
{#                            <a href="#" class="usr"#}
{#                               data-chat-id="cha3"#}
{#                               data-chat-fname="Zekarburg"#}
{#                               data-chat-lname="Almandalie"#}
{#                               data-chat-status="online"#}
{#                               data-rel="popover-hover"#}
{#                               data-placement="right"#}
{#                               data-html="true"#}
{#                               data-content="#}
{#											<div class='usr-card'>#}
{#												<img src='/static/img/avatars/3.png' alt='Zekarburg Almandalie'>#}
{#												<div class='usr-card-content'>#}
{#													<h3>Zekarburg Almandalie</h3>#}
{#													<p>Sales Admin</p>#}
{#												</div>#}
{#											</div>#}
{#										">#}
{#                                <i></i>Zekarburg Almandalie#}
{#                            </a>#}
{##}
{#                            <a href="#" class="usr"#}
{#                               data-chat-id="cha4"#}
{#                               data-chat-fname="Barley"#}
{#                               data-chat-lname="Krazurkth"#}
{#                               data-chat-status="away"#}
{#                               data-rel="popover-hover"#}
{#                               data-placement="right"#}
{#                               data-html="true"#}
{#                               data-content="#}
{#											<div class='usr-card'>#}
{#												<img src='/static/img/avatars/4.png' alt='Barley Krazurkth'>#}
{#												<div class='usr-card-content'>#}
{#													<h3>Barley Krazurkth</h3>#}
{#													<p>Sales Director</p>#}
{#												</div>#}
{#											</div>#}
{#										">#}
{#                                <i></i>Barley Krazurkth#}
{#                            </a>#}
{##}
{#                            <a href="#" class="usr offline"#}
{#                               data-chat-id="cha5"#}
{#                               data-chat-fname="Farhana"#}
{#                               data-chat-lname="Amrin"#}
{#                               data-chat-status="incognito"#}
{#                               data-rel="popover-hover"#}
{#                               data-placement="right"#}
{#                               data-html="true"#}
{#                               data-content="#}
{#											<div class='usr-card'>#}
{#												<img src='/static/img/avatars/female.png' alt='Farhana Amrin'>#}
{#												<div class='usr-card-content'>#}
{#													<h3>Farhana Amrin</h3>#}
{#													<p>Support Admin <small><i class='fa fa-music'></i> Playing Beethoven Classics</small></p>#}
{#												</div>#}
{#											</div>#}
{#										">#}
{#                                <i></i>Farhana Amrin (offline)#}
{#                            </a>#}
{##}
{#                            <a href="#" class="usr offline"#}
{#                               data-chat-id="cha6"#}
{#                               data-chat-fname="Lezley"#}
{#                               data-chat-lname="Jacob"#}
{#                               data-chat-status="incognito"#}
{#                               data-rel="popover-hover"#}
{#                               data-placement="right"#}
{#                               data-html="true"#}
{#                               data-content="#}
{#											<div class='usr-card'>#}
{#												<img src='/static/img/avatars/male.png' alt='Lezley Jacob'>#}
{#												<div class='usr-card-content'>#}
{#													<h3>Lezley Jacob</h3>#}
{#													<p>Sales Director</p>#}
{#												</div>#}
{#											</div>#}
{#										">#}
{#                                <i></i>Lezley Jacob (offline)#}
{#                            </a>#}
{##}
{#                            <a href="/ajax/chat" class="btn btn-xs btn-default btn-block sa-chat-learnmore-btn">About the API</a>#}
{##}
{#                        </div>#}
{#                        <!-- END DISPLAY USERS -->#}
{#                    </li>#}
{#                </ul>#}
{#            </li>#}
{#        </ul>#}
    </nav>


    <span class="minifyme" data-action="minifyMenu">
				<i class="fa fa-arrow-circle-left hit"></i>
			</span>

</aside>
<!-- END NAVIGATION -->

<!-- PAGE FOOTER -->
<div class="page-footer">
    <div class="row">
        <div class="col-xs-12 col-sm-6">
            <span class="txt-color-white">PDcenter V1.0 <span class="hidden-xs"> - 产品数据中心</span> © 2019-2020</span>
        </div>

        <div class="col-xs-6 col-sm-6 text-right hidden-xs">
            <div class="txt-color-white inline-block">
                <i class="txt-color-blueLight hidden-mobile">Last account activity <i class="fa fa-clock-o"></i> <strong>52 mins ago &nbsp;</strong> </i>
                <div class="btn-group dropup">
                    <button class="btn btn-xs dropdown-toggle bg-color-blue txt-color-white" data-toggle="dropdown">
                        <i class="fa fa-link"></i> <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu pull-right text-left">
                        <li>
                            <div class="padding-5">
                                <p class="txt-color-darken font-sm no-margin">Download Progress</p>
                                <div class="progress progress-micro no-margin">
                                    <div class="progress-bar progress-bar-success" style="width: 50%;"></div>
                                </div>
                            </div>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <div class="padding-5">
                                <p class="txt-color-darken font-sm no-margin">Server Load</p>
                                <div class="progress progress-micro no-margin">
                                    <div class="progress-bar progress-bar-success" style="width: 20%;"></div>
                                </div>
                            </div>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <div class="padding-5">
                                <p class="txt-color-darken font-sm no-margin">Memory Load <span class="text-danger">*critical*</span></p>
                                <div class="progress progress-micro no-margin">
                                    <div class="progress-bar progress-bar-danger" style="width: 70%;"></div>
                                </div>
                            </div>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <div class="padding-5">
                                <button class="btn btn-block btn-default">refresh</button>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END PAGE FOOTER -->

<!-- SHORTCUT AREA : With large tiles (activated via clicking user name tag)
Note: These tiles are completely responsive,
you can add as many as you like
-->
<div id="shortcut">
    <ul>
        <li>
            <a href="/inbox" class="jarvismetro-tile big-cubes bg-color-blue"> <span class="iconbox"> <i class="fa fa-envelope fa-4x"></i> <span>Mail <span class="label pull-right bg-color-darken">14</span></span> </span> </a>
        </li>
        <li>
            <a href="/calendar" class="jarvismetro-tile big-cubes bg-color-orangeDark"> <span class="iconbox"> <i class="fa fa-calendar fa-4x"></i> <span>Calendar</span> </span> </a>
        </li>
        <li>
            <a href="/gmap-xml" class="jarvismetro-tile big-cubes bg-color-purple"> <span class="iconbox"> <i class="fa fa-map-marker fa-4x"></i> <span>Maps</span> </span> </a>
        </li>
        <li>
            <a href="/invoice" class="jarvismetro-tile big-cubes bg-color-blueDark"> <span class="iconbox"> <i class="fa fa-book fa-4x"></i> <span>Invoice <span class="label pull-right bg-color-darken">99</span></span> </span> </a>
        </li>
        <li>
            <a href="/gallery" class="jarvismetro-tile big-cubes bg-color-greenLight"> <span class="iconbox"> <i class="fa fa-picture-o fa-4x"></i> <span>Gallery </span> </span> </a>
        </li>
        <li>
            <a href="/profile" class="jarvismetro-tile big-cubes selected bg-color-pinkDark"> <span class="iconbox"> <i class="fa fa-user fa-4x"></i> <span>My Profile </span> </span> </a>
        </li>
    </ul>
</div>

<!-- END SHORTCUT AREA -->